<!--
 * @Description: 学生上传视频审核
 * @Author: liyujie
 * @Date: 2021/3/15
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/3/15
-->
<template>
    <div
        class="wrapper"
        ref="wrapper"
    >
        <div
            class="content-wrapper"
            ref="contentWrapper"
        >
            <div class="base-info">
                <div class="header">
                    <div class="header-title">基础信息</div>
                    <el-button
                        type="text"
                        size="medium"
                        @click="$router.go(-1)"
                    >
                        返回
                    </el-button>
                </div>
                <div class="content">
                    <template v-if="mode !== 'detail'">
                        <div class="base-info-item">
                            <div class="item-label">视频组名称：</div>
                            <div class="item-value">{{ formData.title ? formData.title : '--' }}</div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="base-info-item">
                            <div class="item-label">视频批次：</div>
                            <div class="item-value">{{ formData.series_index ? formData.series_index : '--' }}</div>
                        </div>
                        <div class="base-info-item">
                            <div class="item-label">产品名称：</div>
                            <div class="item-value">{{ formData.series_title ? formData.series_title : '--' }}</div>
                        </div>
                        <div class="base-info-item">
                            <div class="item-label">公司名称：</div>
                            <div class="item-value">{{ formData.company_name ? formData.company_name : '--' }}</div>
                        </div>
                    </template>
                    <div class="base-info-item">
                        <div class="item-label">视频数量：</div>
                        <div class="item-value">{{ formData.count ? formData.count : '--' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">学校名称：</div>
                        <div class="item-value">{{ formData.school_name ? formData.school_name : '--' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">寝室性别：</div>
                        <div class="item-value">
                            {{ formData.sex === 1 ? '男' : formData.sex === 2 ? '女' : '不限' }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 公司信息 -->
            <div
                class="base-info"
                style="padding-bottom: 24px"
                v-if="mode !== 'detail'"
            >
                <div class="header">
                    <div class="header-title">公司信息</div>
                </div>
                <div class="content">
                    <!-- table -->
                    <el-table
                        :data="formData.hire_link_list"
                        max-height="200"
                        style="width: 100%;"
                        ref="tempLateName"
                        class="data-table"
                    >
                        <el-table-column
                            label="序号"
                            align="center"
                            width="80"
                            type="index"
                        />
                        <el-table-column
                            prop="company_name"
                            label="公司名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_title"
                            label="产品名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_index"
                            label="批次"
                            show-overflow-tooltip
                            align="center"
                        />
                    </el-table>
                </div>
            </div>
            <div
                class="video-list-wrapper"
                :style="{height: `${autoHeight}px`}"
            >
                <div class="header">
                    <div class="header-title">查看视频</div>
                </div>
                <div class="filter-view">
                    <div class="header-new-box">
                        <el-radio-group
                            v-model="filterData.student_audit_status"
                            size="small"
                            @change="handleStatusChange"
                        >
                            <el-radio-button
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.value"
                            >
                                {{ item.label }}
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            排序规则
                        </p>
                        <el-select
                            v-model="filterData.sort_field"
                            size="medium"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in sortTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-select
                            v-model="filterData.sort_type"
                            size="medium"
                            style="width: 120px; margin-left: 12px"
                            @change="getTableData(1)"
                        >
                            <el-option
                                label="正序"
                                :value="0"
                            />
                            <el-option
                                label="倒序"
                                :value="1"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            视频名称
                        </p>
                        <el-input
                            placeholder="请输入视频名称"
                            v-model="filterData.video_name"
                            suffix-icon="el-icon-search"
                            clearable
                            size="medium"
                            @keydown.enter.native="getTableData(1)"
                        />
                    </div>
                </div>
                <div
                    class="score-view"
                    v-if="filterData.student_audit_status === 2"
                >
                    <el-radio-group
                        v-model="filterData.score"
                        @change="getTableData(1)"
                    >
                        <el-radio
                            v-for="item in scoreList"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.label }}
                        </el-radio>
                    </el-radio-group>
                </div>
                <div
                    class="score-view"
                    v-if="filterData.student_audit_status === -1"
                >
                    <el-radio-group
                        v-model="filterData.audit_status"
                        @change="getTableData(1)"
                    >
                        <el-radio :label="0">初审</el-radio>
                        <el-radio :label="-1">二审</el-radio>
                    </el-radio-group>
                </div>
                <el-checkbox-group
                    v-model="multipleSelection"
                    class="checkbox-wrapper"
                    v-if="tableData.length"
                    @change="handleSelectedChange"
                >
                    <div
                        class="video-list"
                        v-loading="tableLoading"
                    >
                        <div
                            class="video-item"
                            v-for="(item) in tableData"
                            :key="item.video_no"
                        >
                            <div
                                class="video-item-cover"
                                :style="{backgroundImage: `url(${item.video_cover})`}"
                                @click="previewVideo(item.video_url)"
                            >
                                <img src="@/assets/image/video-play.png">
                            </div>
                            <div class="video-item-info">
                                <div class="item-title">{{ item.video_name }}</div>
                                <div class="item-info">
                                    <div class="video-size">{{ item.video_size | formatFileSize }}</div>
                                    <div class="video-date">{{ item.upload_time * 1000 | dateFormatter('yyyy-MM-dd') }}上传</div>
                                </div>
                            </div>
                            <div
                                class="video-item-footer"
                                :style="filterData.student_audit_status === -1 ? {border: '0'} : ''"
                                v-if="filterData.student_audit_status !== 2 && mode !== 'detail'"
                            >
                                <div
                                    class="btn"
                                    v-if="item.student_audit_status === 1"
                                >
                                    <div
                                        class="btn-item"
                                        @click="showRejectDialog([item])"
                                    >
                                        不通过
                                    </div>
                                    <div
                                        class="btn-item"
                                        @click="showScoringDialog([item])"
                                    >
                                        通过
                                    </div>
                                </div>
                                <div
                                    class="reject-reason"
                                    v-if="item.student_audit_status === -1"
                                >
                                    未通过原因：{{ item.student_audit_reason }}
                                </div>
                            </div>
                            <div
                                class="video-item-sub-footer"
                                v-if="mode !== 'detail' && (item.student_audit_status === 2 || (item.student_audit_status === -1 && item.audit_status === 0))"
                                @click="handleWithdraw(item)"
                            >
                                撤回
                            </div>
                            <el-checkbox
                                :label="item"
                                class="checkbox"
                                v-if="filterData.student_audit_status === 1 && mode !== 'detail'"
                            ><br></el-checkbox>
                        </div>
                    </div>
                </el-checkbox-group>
                <div
                    class="video-list empty"
                    v-if="!tableData.length"
                >
                    <div class="empty">
                        暂无数据
                    </div>
                </div>
                <div class="list-footer">
                    <div class="option-view">
                        <template v-if="filterData.student_audit_status === 1 && tableData.length && mode !== 'detail'">
                            <el-checkbox
                                label="当页全选"
                                v-model="checkAllStatus"
                                :indeterminate="checkIndeterminate"
                                @change="handleSelectedAll"
                            />
                            <el-button
                                type="text"
                                size="medium"
                                style="margin-left: 20px"
                                :disabled="multipleSelection.length === 0"
                                @click="showScoringDialog(multipleSelection)"
                            >
                                批量通过
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                :disabled="multipleSelection.length === 0"
                                @click="showRejectDialog(multipleSelection)"
                            >
                                批量不通过
                            </el-button>
                        </template>
                    </div>
                    <el-pagination
                        layout="total, prev, pager, next, jumper"
                        background
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getTableData"
                    />
                </div>
            </div>
        </div>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
        <!-- 视频评分组件 -->
        <video-scoring-dialog
            ref="videoScoringDialog"
            @update="getTableData()"
        />
        <!-- 审核驳回弹窗 -->
        <reject-dialog
            ref="rejectDialog"
            :visible.sync="rejectDialog"
            :maxlength="20"
            placeholder="请输入不通过的原因…"
            @confirm="handleVerify('reject', $event)"
        />
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import {formatFileSize} from '@/assets/js/utils';
import VideoSimple from "@/components/dorm/video-simple";
import VideoScoringDialog from "@/components/dorm/video-scoring-dialog";
import RejectDialog from "@/components/dialog/reject-dialog";

export default {
    name: 'StudentVideoVerify',
    mixins: [back],
    components: {RejectDialog, VideoScoringDialog, VideoSimple},
    data() {
        return {
            // detail为查看模式
            mode: '',
            series_no: '',
            student_no: '',
            from_no: '',
            filterData: {
                sort_field: 0,
                sort_type: 0,
                student_audit_status: 1,
                audit_status: 99,
                video_name: '',
                score: 99
            },
            formData: {},
            tableData: [],
            tableLoading: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            multipleSelection: [],
            checkAllStatus: false,
            checkIndeterminate: false,
            video_url: '',
            left: 0,
            rejectDialog: false,
            audit_list: [],
            statusList: [
                {label: '待审核', value: 1},
                {label: '已通过', value: 2},
                {label: '未通过', value: -1},
            ],
            sortTypeList: [
                {label: '按更新时间', value: 0},
                {label: '按视频大小', value: 1},
                {label: '按视频时长', value: 2},
            ],
            scoreList: [
                { label: '全部', value: 99 },
                { label: '低于预期(1)', value: 1 },
                { label: '符合预期(2)', value: 2 },
                { label: '超出预期(3)', value: 3 },
                { label: '远超预期(5)', value: 5 },
            ],
            authResult: {},
            autoHeight: 1000,
            screenWidth: document.body.clientWidth,
        };
    },
    filters: {
        formatFileSize,
        videoNameFilter(val) {
            if(val.length > 14) {
                return `${val.slice(0, 10)}...${val.substring(val.lastIndexOf("."))}`;
            }
            return val;
        }
    },
    computed: {},
    watch: {
        screenWidth (val) {
            if (!this.timer) {
                this.screenWidth = val;
                this.timer = true;

                setTimeout( () => {
                    this.calcAutoHeight();
                    this.timer = false;
                }, 300);
            }
        }
    },

    mounted() {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '工作'},
            {title: '精英任务领取列表',path: '/student/elite-task-receive-list?active=dorm'},
            {title: '任务详情',path: `/student/dorm-task-detail?no=${query.student_no}&from_no=${query.from_no}`},{title: '用户上传审核'}]);
        this.authResult = this.$route.meta.authResult;
        this.series_no = query.no;
        this.student_no = query.student_no;
        this.from_no = query.from_no;
        this.mode = query.mode;
        this.getTableData();
        this.getDetail();
        this.calcAutoHeight();
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                this.screenWidth = window.screenWidth;
            })();
        };
    },

    methods: {

        /**
         * @description 获取批次详情
         */
        getDetail() {
            let params = { series_no: this.series_no };
            let query = this.$route.query;

            this.$post('/student/room_series%5Cget', params, res => {
                if (res.code === 1) {
                    this.formData = res.data;
                    if(this.mode === 'detail') {
                        this.formData.company_name = query.company_name;
                        this.formData.series_index = query.series_index;
                        this.formData.series_title = query.series_title;
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = { ...this.filterData };

            params.page_id = page || this.page.now_page;
            params.series_no = this.series_no;
            this.$post('/student/room_series_video%5Cget_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 审核视频不通过
         * @param action
         * @param verify_fail_reason
         */
        handleVerify(action, verify_fail_reason = '') {
            let audit_list = this.audit_list.map(item => {
                item.audit_reason = verify_fail_reason;
                return item;
            });
            let params = {
                audit_list: JSON.stringify(audit_list),
                type: -1,
            };

            this.$post('/student/room_series_video%5Cstudent_audit_batch', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getTableData();
                    this.checkAllStatus = false;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 选中视频
         * @param value
         */
        handleSelectedChange(value) {
            let checkedCount = value.length;

            this.checkAllStatus = checkedCount === this.tableData.length;
            this.checkIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
        },

        /**
         * 点击全选
         * @param val
         */
        handleSelectedAll(val) {
            this.multipleSelection = val ? this.tableData : [];
            this.checkIndeterminate = false;
        },

        /**
         * 查看视频
         * @param url
         */
        previewVideo(url) {
            this.video_url = url;
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * 显示拒绝弹窗
         * @param videos
         */
        showRejectDialog(videos) {
            if(!this.authResult.auth_verify) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.audit_list = videos.map(item => {
                return {
                    video_no: item.video_no,
                    audit_reason: ''
                };
            });
            this.rejectDialog = true;
        },

        /**
         * 显示打分弹窗
         */
        showScoringDialog(videos) {
            if(!this.authResult.auth_verify) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$refs.videoScoringDialog.show(videos);
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 筛选状态
         * @param val
         */
        handleStatusChange(val) {
            this.filterData.score = 99;
            this.filterData.audit_status = val === -1 ? 0 : 99;
            this.getTableData(1);
        },

        /**
         * 撤回
         * @param row
         */
        handleWithdraw(row) {
            this.$confirm('确定撤回审核?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    video_no: row.video_no,
                    type: 3
                };

                this.$post('/student/room_series_video%5Cstudent_audit', params, res => {
                    if (res.code === 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            type: 'success'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 动态计算高度
         */
        calcAutoHeight() {
            this.autoHeight = this.$refs.contentWrapper.offsetHeight;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    flex: 1;
    position: relative;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        margin: 12px;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0;
        }
        /*header*/
        .header {
            height: 66px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;
            padding: 24px;

            .header-title {
                color: #333333;
                font-size: 20px;
                font-weight: 500;
            }
        }
        .base-info {
            margin-bottom: 12px;
            background: #fff;
            flex-shrink: 0;
            .content {
                display: flex;
                flex-wrap: wrap;
                padding: 24px 36px 4px;
                .base-info-item {
                    width: 25%;
                    display: flex;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    margin-bottom: 20px;
                    .item-label {
                        color: #888888;
                    }
                    .item-value {
                        color: #333333;
                    }
                }
            }
        }
        .video-list-wrapper {
            background: #fff;
            height: 1200px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            .filter-view {
                margin-top: 12px;
                padding: 0 24px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .header-new-box {
                    display: flex;
                    align-items: center;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    white-space: nowrap;
                    margin-right: 24px;
                    margin-bottom: 12px;

                    &-title {
                        margin-right: 16px;
                        white-space: nowrap;
                    }
                }
            }
            .score-view {
                padding: 0 24px;
                margin: 6px 0;
            }
            /deep/ .el-radio__label {
                padding-left: 4px;
            }
            .checkbox-wrapper {
                flex: 1;
                overflow: auto;
                &::-webkit-scrollbar {
                    width: 6px;
                }
            }
            .video-list {
                flex: 1;
                padding: 24px 24px 56px;
                overflow-y: auto;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                &::-webkit-scrollbar {
                    width: 6px;
                }

                .video-item {
                    width: 212px;
                    background: #FFFFFF;
                    box-shadow: 0 0 20px 0 rgba(98, 152, 214, 0.2);
                    border-radius: 8px;
                    margin-bottom: 20px;
                    margin-right: 20px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    &:hover {
                        box-shadow: 0 0 30px 0 rgba(98, 152, 214, 0.5);
                        transition: all 0.3s ease-in-out;
                    }
                    .video-item-cover {
                        height: 144px;
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        img {
                            width: 60px;
                        }
                    }
                    .video-item-info {
                        padding: 10px 12px;
                        display: flex;
                        flex-direction: column;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        .item-title {
                            font-size: 14px;
                            color: #333333;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                            margin-bottom: 10px;
                            line-height: 20px;
                        }
                        .item-info {
                            display: flex;
                            justify-content: space-between;
                            font-size: 12px;
                            color: #999999;
                            line-height: 12px;
                        }
                    }
                    .video-item-footer {
                        border-top: 1px solid #F0F2F5;
                        height: 48px;
                        display: flex;
                        align-items: center;
                        font-weight: 400;
                        font-family: PingFangSC-Regular, PingFang SC;
                        .btn {
                            display: flex;
                            height: 20px;
                            width: 100%;
                            .btn-item {
                                flex: 1;
                                font-size: 14px;
                                color: #1890FF;
                                text-align: center;
                                line-height: 20px;
                                cursor: pointer;
                                &:first-child {
                                    border-right: 1px solid #F0F2F5;
                                }
                            }
                        }
                        .reject-reason {
                            font-size: 12px;
                            color: #F59E33;
                            line-height: 18px;
                            padding: 0 12px 12px;
                        }
                    }
                    .video-item-sub-footer {
                        border-top: 1px solid #F0F2F5;
                        height: 48px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 400;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-size: 14px;
                        color: #FF3030;
                        cursor: pointer;
                    }
                    .checkbox {
                        position: absolute;
                        top: 12px;
                        right: 0;
                        z-index: 0;
                    }
                }
                .empty {
                    color: #909399;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .list-footer {
                width: calc(100% - 24px);
                margin: 0 12px;
                height: 56px;
                background: #FFFFFF;
                box-shadow: 0 1px 0 0 #E7E7E7;
                position: absolute;
                left: 0;
                bottom: 12px;
                border-top: 1px solid #F0F2F5;
                padding: 0 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .option-view {

                }
                .el-pagination {
                    background-color: transparent;
                }
            }
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-radio-button {
        &.is-active {
            .el-radio-button__inner {
                background: #E6F1FC;
                color: #20A0FF;
                border-color: #20A0FF;
            }
        }
    }
}
</style>

